<template>
  <div>
        <span>排课信息</span>
        <router-link :to="'/privateCourses'">
          <el-button id="button" size="mini" icon="el-icon-arrow-left" round>返回</el-button>
        </router-link>
        <el-form ref="form" :model="privateTimetableAddVo.timetable" label-width="200px">
          <el-form-item label="场馆选择：">
            <el-select @change="getCoach" v-model="privateTimetableAddVo.timetable.gymId"  placeholder="选择场馆" >
              <el-option
                v-for="gym in gyms"
                :key="gym.id"
                :label="gym.name"
                :value="gym.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教练：">
            <el-select v-model="privateTimetableAddVo.timetable.coachId"  placeholder="选择教练" >
              <el-option
                v-for="coach in coachVo"
                :key="coach.id"
                :label="coach.name"
                :value="coach.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上课日期： ">
            <div class="block">
              <el-date-picker
                v-model="privateTimetableAddVo.timetable.classTime"
                type="daterange"
                start-placeholder="开课日期"
                end-placeholder="结课日期"
                value-format="yyyy-MM-dd"
                @change="dateFormat">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="开课时间： ">
            <el-time-select
              placeholder="起始时间"
              v-model="privateTimetableAddVo.timetable.startTime"
              @change="changeEndTime"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '20:30'
              }">
            </el-time-select>
          </el-form-item>
          <el-form-item label="结课时间： ">
            <el-time-select
              placeholder="结束时间"
              v-model="privateTimetableAddVo.timetable.endTime"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '21:30',
                minTime: privateTimetableAddVo.timetable.startTime
              }">
            </el-time-select>
          </el-form-item>
          <el-form-item label="单节课可预约人数上限： ">
            <el-input-number v-model="privateTimetableAddVo.timetable.orderNum" controls-position="right"/>
            <span>&nbsp&nbsp人</span>
          </el-form-item>
        </el-form>
    <el-row >
      <el-col :span="24" >
        <div class="grid-content bg-purple-dark" style="line-height: 50px" >&nbsp&nbsp&nbsp支持会员卡&nbsp（私教课程仅支持储值卡请填写扣费金额）</div>
      </el-col>
    </el-row>
    <el-table
      border
      ref="multipleTable"
      :data="cardVo"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="会员卡名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="type"
        label="会员卡类型"
        width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.type == '1'">储值类型</span>
          <span v-else>次卡类型</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="gymName"
        label="支持场馆"
        width="120"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="classChange" label="收费设置" align="center">
        <template slot-scope="scope">
          <div>1课时收费&nbsp&nbsp&nbsp<input type="text" v-model="scope.row.oneClassHour">&nbsp元</div>
          <div>6课时收费&nbsp&nbsp&nbsp<input type="text" v-model="scope.row.sixClassHour">&nbsp元</div>
          <div>10课时收费&nbsp<input type="text" v-model="scope.row.tenClassHour">&nbsp元</div>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="onSubmit">保存</el-button>
  </div>
</template>
<script>
  import gym from "../../api/gym";
  import coach from "../../api/coach";
  import privateTimetable from "../../api/privateTimetable";
  import card from "../../api/card";
  export default {
    data(){
      return {
        privateTimetableAddVo : {
          timetable : {               //课程安排表对象
            startTime: '',
            endTime: '',
            classTime: [],
          },
          cardVos: [],
        },
        gyms : {},                 //场馆对象
        courses: {},
        coachVo: {},
        cardVo: [],


      }
    },
    created() {
      this.getGym();
      this.findCard();
      if(this.$route.params && this.$route.params.id){
        // 表示: 路由参数里面有值，并且有id这个值
        console.log("进行课程安排")
        // 获取课程id
        this.privateTimetableAddVo.timetable.privateCourseId = this.$route.params.id;


      }
    },
    methods : {
      //查询场馆
      getGym(){
        gym.queryAll().then(res => {
          console.log("查询场馆数据",res);
          this.gyms = res.data;
        })
      },
      //查询场馆的教练
      getCoach(){
        if (this.privateTimetableAddVo.timetable.coachId == ''){
          this.$message.info("请选择场馆！")
        }else {

          coach.getByGym(this.privateTimetableAddVo.timetable.gymId).then(res =>{
            console.log("查询教练数据",res)
            this.coachVo = res.data;
          })
        }
      },
      //时间数组转换成字符串
      dateFormat(picker){
        this.privateTimetableAddVo.timetable.startDate = picker[0].toString();
        this.privateTimetableAddVo.timetable.endDate = picker[1].toString();
      },

      onSubmit(){

        console.log("课程表数据：",this.privateTimetableAddVo);
        privateTimetable.addTimetable(this.privateTimetableAddVo).then(res =>{
          console.log("添加课程表返回数据：",res);
          this.$message.success(res.message);
          if (res.flag){
            this.$router.push({ path: '/privateCourses' })
          }

        })
      },
      findCard(){
        card.getType().then(res =>{
          this.cardVo = res.data;
        })
      },

      handleSelectionChange(val){
        console.log("选择的卡数据",val)
        this.privateTimetableAddVo.cardVos = val;
        console.log("cardVos数据：",this.privateTimetableAddVo.cardVos)
      },
      //当开始时间发生变化时
      changeEndTime(){
        this.privateTimetableAddVo.timetable.endTime = '';
      }

    }
  }
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

